<template>
	<view class="body">
		<navbar name="记录饮食"></navbar>
		<view class="searchView">
			<u-search :clearabled="true"
			 placeholder-color="#BFBEC3"
			  v-model="keyword"
			   :show-action="false"
				placeholder="请输入您想查询的食材"
				 @change="searchValue"
				 @clear="clear">
			</u-search>
		</view>
		<view class="tabsView" v-if="tabsShow">
			<u-tabs font-size="30rpx" bar-width="80" active-color="#2EA7E0" :list="list" :is-scroll="true"
				:current="current" @change="change"></u-tabs>
		</view>
		<view class="foodView">
			<block v-for="(item,idx) in foodlList" :key="idx">
				<view class="weui-flex foodb">
					<view>
						<view class="placeholder">
							<image class="foodImage" :src="item.imageLocalPath"></image>
						</view>
					</view>
					<view class="weui-flex__item">
						<view class="placeholder">
							<view class="foodTitle ellipsis">
								{{item.food}} <text v-show="item.alias" style="color: #9B9B9B;">（{{item.alias}}）</text>
							</view>
							<view class="frigorie">
								{{item.foodHeat}}千卡/100g
							</view>
						</view>
					</view>
					<view>
						<view class="placeholder">
							<view class="addView" @tap="addtap('ydk',item)">
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view class="formStyle weui-flex">
			<view class="weui-flex__item">
				<view class="placeholder sumUp">
					已选：{{selectedArr.length}} 总摄入：{{allFoodHeat}}千卡
				</view>

			</view>
			<view >
				<view class="placeholder">
					<button type="default" @tap.stop="formfh" class="formBtn">提交</button>
				</view>
			</view>
		</view>
		<selecta ref="ydk" :typePage="1" @switchTime="switchTime" :timeValue="value1==''||endTime==value1?'今日':value1.replace(/-/g,'.')"
			:checkedData="checkedData" @scrollLeftNow="scrollLeftNow" @formFood="formFood" ></selecta>
		<lb-picker ref="picker1" v-model="value1" :format="curFormat" display-format="YYYY-MM-DD-HH-mm-ss" mode="dateSelector"  @change="handleChange" @confirm="handleConfirm"
			@cancel="handleCancel" start-date="2021-1-1" :end-date="endTime">
		</lb-picker>
	</view>
</template>
<script>
	import dayjs from '@/common/utils/day/day.js'
	import selecta from '@/pages/subpackage/components/lb-picker/select'
	import lbPicker  from '@/pages/subpackage/components/lb-picker/index';

import uSearch from "@/uview-ui/components/u-search/u-search.vue"
import uTabs from "@/uview-ui/components/u-tabs/u-tabs.vue"

	export default {
		components: {
			selecta,
			uSearch,
			uTabs,
			lbPicker
		},
		data() {
			return {
				curFormat: 'YYYY-MM-DD HH:mm:ss',
				selectedArr:[],//已选择Arr
				allFoodHeat:0,//总摄入量
				startTime:'2020-12-31',
				endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
				classid:1,
				pageCurrent:1,//当前页
				pageSize:10,//每页加载条数
				indicId: '', //指标id
				scrollLeftNowa: '', //食物克数
				value1: '',
				sliderValue: 10,
				checkedData: {
					image: '',
					title: '冬瓜',
					frigorie: '1560'
				},
				popupShow: true,
				tabsShow: true,
				foodlList: [],
				list: [{
					name: '主食',
				}, {
					name: '蔬菜',
				}, {
					name: '水果'
				}, {
					name: '豆类'
				}, {
					name: '奶类'
				}, {
					name: '肉类'
				}, {
					name: '杂粮'
				}],
				current: 0,
				sectionCurrent: 0,
				keyword: '',
			}
		},
		onLoad(e) {
			this.indicId = e.indicId //进入indicId
			this.dataFoodClass('', 1, 100)
		},
		onShow() {
			this.getByClassId(this.classid,'',this.pageCurrent,this.pageSize,true)
		},
		methods: {
			formfh(){
				uni.navigateBack({
					delta: 1
				});
			},
			dataFood(keyword,pageCurrent,pageSize,concatBr){
				let _this = this;
				this.$api.get(global.apiUrls.dataFood+ '?keyword=' + keyword +
						'&pageCurrent=' + pageCurrent+'&pageSize='+pageSize, {})
					.then(res => {
						if(res.data.code == 1000){
							if(concatBr){//搜索
								let records = res.data.result.records;
								_this.foodlList =records
							}else{//分页触发
								let records = res.data.result.records;
								_this.foodlList =_this.foodlList.concat(records)
							}

						}
					})
			},
			formFood(e){
				console.log(e)
				if(e.type=='ys'){
					this.userFood(e.foodId,e.foodHeat,e.intakeWeight)
				}
			},
			onReachBottom : function() { //分页加载
				if(this.keyword == ''){//tab分页
					this.getByClassId(this.classid,'',this.pageCurrent+=1,this.pageSize,false)
				}else{//搜索分页
					this.dataFood(this.keyword,this.pageCurrent+=1,this.pageSize,false)
				}
			},
			// 获取食物详情
			getByClassId(classId, keyword, pageCurrent, pageSize,concatBr) {
				let _this = this;
				this.$api.get(global.apiUrls.getByClassId + classId + '?keyword=' + keyword +
						'&pageCurrent=' + pageCurrent+'&pageSize='+pageSize, {})
					.then(res => {
						if (res.data.code == 1000) {
							let records = res.data.result.records;
							if(concatBr){//切换分类
								_this.foodlList = records
							}else{//触底分页
								_this.foodlList = _this.foodlList.concat(records);
							}
						}else{

						}
					})
			},
			// 获取饮食分类
			dataFoodClass(keyword, pageCurrent, pageSize) {
				let _this = this;
				this.$api.get(global.apiUrls.dataFoodClass + '?keyword=' + keyword + '&pageCurrent=' + pageCurrent +
						'&pageSize=' + pageSize, {})
					.then(res => {
						if (res.data.code == 1000) {
							let records = res.data.result.records;
							_this.list = records
						}
					})
			},
			scrollLeftNow(e) {
				this.scrollLeftNowa = e
			},
			// 饮食记录
			userFood(foodId, foodHeat,intakeWeight) {
				let _this = this,
					fdata = {
						foodId:foodId,
						heatQuantity:foodHeat,
						indicId:this.indicId,
						intakeWeight:intakeWeight,
						recordTime:this.value1 == ''?dayjs().format('YYYY-MM-DD'):dayjs(this.value1).format('YYYY-MM-DD'),
						createTime:this.value1 == ''?dayjs().format('YYYY-MM-DD HH:mm:ss'):this.value1,
						userId:uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId
					},isRepea =false;//是否重复

				this.$api.post(global.apiUrls.userFood, fdata).then(res => {
					if (res.data.code == 1000) {
						uni.showToast({
							title: res.data.message,
							duration: 2000
						});
						if(_this.value1 == ''||_this.value1 == _this.endTime){
							_this.allFoodHeat+=foodHeat//同一天添加千卡
						}
						for(let i = 0;i<_this.selectedArr.length;i++){
							if(_this.selectedArr[i] == foodId){
								isRepea = true;
								break;
							}
						}
						if(!isRepea){//未重复
							_this.selectedArr.push(foodId)
						}
					} else {
						uni.showToast({
							title: res.data.message,
							icon: "none",
							duration: 2000
						});

					}
				}).catch(err => {})
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			handleChange(e) {
				console.log('change::', e)
			},
			handleConfirm(e) {
				console.log(e)
				this.$refs['ydk'].ydShow()
			},
			handleCancel(e) {
				console.log('cancel::', e)
			},
			switchTime(e) {
				if(e){
					this.$refs['picker1'].show()
					this.$refs['ydk'].hide()
				}else{
					this.$refs['ydk'].ydShow()
				}

			},
			addtap(name,item) {
				this.checkedData = item
				this.$refs[name].ydShow()
			},
			searchValue(e) {
				console.log(e)
				this.keyword = e
				if (e != '') {
					this.tabsShow = false;
					this.dataFood(e,1,10,true)//搜索
				} else {
					this.tabsShow = true;
					this.getByClassId(this.classid,'',this.pageCurrent,this.pageSize,true)//空
				}
			},
			clear(){
				this.tabsShow = true;
				this.getByClassId(this.classid,'',this.pageCurrent,this.pageSize,true)//空
			},
			change(index) {
				this.current = index;
				let list = this.list,
				classid;
				this.classid = list[index].id;
				this.getByClassId(this.classid,'',1,this.pageSize,true)
			}
		}
	}
</script>

<style lang="scss">
	@import "./exercise.scss";
</style>
